8e:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo"],"SWRDataProvider"] 90:T79a3,[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import PulsingHexagonBackground from "@/components/pulsing-hexagon-background" export default function Home() { return (

) } [V0_FILE]css:file="components/settings-panel.css" isEdit="true" isQuickEdit="true" /* ==================================== SETTINGS PANEL - RHYTHM CONTROLLER ==================================== */ /* --- Panel Container --- */ .settings-panel { position: fixed; z-index: 50; width: 280px; background-color: #1A1A1A; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); border: 1px solid #2A2A2A; display: flex; flex-direction: column; } /* --- Title Bar --- */ .settings-panel-titlebar { padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2A2A2A; background-color: #0F0F0F; color: #FFFFFF; border-top-left-radius: 8px; border-top-right-radius: 8px; cursor: grab; user-select: none; } .settings-panel-titlebar:active { cursor: grabbing; } .settings-panel-title { font-family: sans-serif; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; } .settings-panel-minimize-btn { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background-color: #2A2A2A; border: 1px solid rgba(224, 224, 224, 0.13); transition: background-color 0.2s; cursor: pointer; } .settings-panel-minimize-btn:hover { background-color: rgba(42, 42, 42, 0.8); } /* --- Panel Body --- */ .settings-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } /* --- Section Headers --- */ .settings-section-header { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; font-weight: 600; color: #9CA3AF; } /* --- Rhythm Buttons Grid --- */ .rhythm-buttons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .rhythm-btn { position: relative; padding: 10px 8px; font-size: 12px; font-weight: bold; text-transform: uppercase; border-radius: 4px; transition: all 0.2s; background-color: #2A2A2A; color: #FFFFFF; border: 1px solid #2A2A2A; cursor: pointer; } .rhythm-btn:hover { background-color: rgba(42, 42, 42, 0.8); } .rhythm-btn.active { background-color: #3A3A3A; border-color: #4A4A4A; } /* --- Fader Container --- */ .vst-fader-container { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-bottom: 12px; } .vst-fader-label { text-align: left; font-size: 10px; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.05em; color: #9CA3AF; } /* --- Fader Track Area --- */ .vst-fader-track-area { position: relative; width: 100%; height: 32px; display: flex; align-items: center; /* Added left and right padding to prevent thumbs from touching panel edges */ padding-left: 14px; padding-right: 14px; } /* Set track to span full width within padded container */ .vst-fader-track { position: absolute; left: 0; right: 0; height: 6px; background-color: #2A2A2A; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 -1px 1px rgba(255, 255, 255, 0.05); } .vst-fader-progress { height: 100%; border-radius: 2px; background-color: #505050; box-shadow: 0 0 5px rgba(80, 80, 80, 0.63); } /* --- Fader Input (Range) --- */ .vst-fader-input { position: absolute; /* Set input to span full width matching track */ left: 0; right: 0; width: 100%; /* Keep this, as `left:0; right:0;` only works if `position:absolute` is also on parent. It's good practice to keep width: 100% as well*/ height: 100%; appearance: none; cursor: pointer; background: transparent; z-index: 10; } /* Rotated thumb to vertical orientation - swapped width/height and adjusted gradients */ .vst-fader-input::-webkit-slider-thumb { appearance: none; cursor: pointer; box-sizing: border-box; background: linear-gradient(90deg, #4a4a4a 0 9px, #444 0px, #000 7px, #fff 12px, #333 10px 40px, #444 0px, #2a2a2a 25px); border: 1px solid #111; border-radius: 3px; width: 25px; height: 30px; position: relative; box-shadow: 0 2px 10px #00000080, inset 0 0 2px #ffffff80; } .vst-fader-input::-moz-range-thumb { width: 28px; height: 56px; cursor: pointer; background: linear-gradient(to right, #4a4a4a 0px, #4a4a4a 9px, #444444 10px, #000 11px, #ffffff 13px, #333333 15px, #444444 16px, #2a2a2a 40px ); box-shadow: 0 2px 10px 0px rgba(0,0,0,0.5), 0 0px 2px 0px rgba(255,255,255,0.5) inset; box-sizing: border-box; border: 1px solid #111; border-radius: 2px; } /* Remove default track styling */ .vst-fader-input::-webkit-slider-runnable-track { background: transparent; border: none; } .vst-fader-input::-moz-range-track { background: transparent; border: none; } /* Adjusted center line dimensions for vertical thumb */ .vst-fader-thumb-line { position: absolute; width: 16px; height: 2px; background-color: rgba(0, 0, 0, 0.6); pointer-events: none; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 11; } /* --- Checkbox --- */ .settings-checkbox { width: 14px; height: 14px; accent-color: #505050; cursor: pointer; } .settings-checkbox-label { margin-left: 8px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #9CA3AF; } /* --- Color Picker --- */ .settings-color-picker-label { font-size: 9px; display: block; margin-bottom: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #9CA3AF; } .settings-color-picker { width: 100%; height: 32px; padding: 0; border: none; cursor: pointer; border-radius: 6px; background-color: #2A2A2A; } /* --- Buttons --- */ .settings-action-buttons { margin-top: 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .settings-action-btn { position: relative; padding: 8px 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; border-radius: 6px; transition: all 0.2s; background-color: #2A2A2A; color: #FFFFFF; border: 1px solid #2A2A2A; cursor: pointer; } .settings-action-btn:hover { background-color: rgba(42, 42, 42, 0.9); } /* --- Divider --- */ .settings-divider { margin-top: 12px; padding-top: 12px; border-top: 1px solid #2A2A2A; } [V0_FILE]typescriptreact:file="components/pulsing-hexagon-background.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState, useCallback } from "react" import "./settings-panel.css" // ======================================================= // --- CONSTANTES GLOBAIS (CORES E RITMOS) --- // ======================================================= // --- Configuração de Cores (DARK GRAY THEME) --- const PRIMARY_GRAY = '#505050'; // Cinza escuro para destaques const DEEP_BLACK = '#0F0F0F'; // Preto mais profundo (fundo do título) const PANEL_GRAY = '#1A1A1A'; // Fundo principal do painel (quase preto) const TRACK_GRAY = '#2A2A2A'; // Trilhas de Fader (cinza mais escuro) const HIGHLIGHT_WHITE = '#E0E0E0'; // Destaques Metálicos/Thumb (mantido) const TEXT_COLOR = '#9CA3AF'; // Texto cinza claro (mais suave) // --- MÓDULO: PULSOS ALEATÓRIOS CONTROLADOS --- const PULSE_RHYTHMS = { "Techno (Frequente)": { base: 0.2, frequency: 0.15, decay: 0.9, amplitude: 0.8, chaos: false }, "Hip-Hop (Esporádico)": { base: 0.1, frequency: 0.05, decay: 0.85, amplitude: 1.0, chaos: false }, "Lo-Fi (Suave)": { base: 0.4, frequency: 0.02, decay: 0.95, amplitude: 0.5, chaos: false }, "Rock (Explosivo)": { base: 0.05, frequency: 0.1, decay: 0.7, amplitude: 1.2, chaos: false }, "Ambient (Original)": { base: 0.0, frequency: 0.0, decay: 0, chaos: true, amplitude: 1.0 } }; type RhythmKey = keyof typeof PULSE_RHYTHMS; // --- Definições de Tipos e Configurações --- type CustomSettings = { useColorCycle: boolean; staticColor: string; colorTransitionSpeed: number; pulseAmplitude: number; lightRadiusMultiplier: number; lightConcentration: number; persistenceFactor: number; gridScaleFactor: number; } const DEFAULT_SETTINGS: CustomSettings = { useColorCycle: false, staticColor: PRIMARY_GRAY, colorTransitionSpeed: 64, pulseAmplitude: 1.0, lightRadiusMultiplier: 0.875, lightConcentration: 0.03, persistenceFactor: 0.02, gridScaleFactor: 1.0, } // ======================================================= // --- COMPONENTES UI (AGORA ACESSANDO CONSTANTES) --- // ======================================================= const VSTButton: React.FC> = ({ children, ...props }) => ( ); interface FaderProps { label: string; value: number; min: number; max: number; step: number; displayValue: string; onChange: (value: number) => void; } const VSTFader: React.FC = ({ label, value, min, max, step, displayValue, onChange }) => { const percentage = ((value - min) / (max - min)) * 100; return (

{label} ({displayValue})

onChange(parseFloat(e.target.value))} className="vst-fader-input" />

); } interface WindowTitleBarProps { title: string; onMinimize: () => void; isMinimized: boolean; onMouseDown: (e: React.MouseEvent) => void; } const WindowTitleBar: React.FC = ({ title, onMinimize, isMinimized, onMouseDown }) => { return (

{title}

); }; const SettingsPanel: React.FC<{ settings: CustomSettings; setSettings: React.Dispatch>; currentRhythm: RhythmKey; setCurrentRhythm: (rhythm: RhythmKey) => void; }> = ({ settings, setSettings, currentRhythm, setCurrentRhythm }) => { const updateSetting = (key: keyof CustomSettings, value: any) => { setSettings(prev => ({ ...prev, [key]: value })); } const [position, setPosition] = useState({ x: 20, y: 20 }); const [isDragging, setIsDragging] = useState(false); const [offset, setOffset] = useState({ x: 0, y: 0 }); const [isMinimized, setIsMinimized] = useState(true); const panelRef = useRef(null); const handleMinimize = useCallback(() => { setIsMinimized(prev => !prev); }, []); const handleMouseDown = useCallback((e: React.MouseEvent) => { setIsDragging(true); setOffset({ x: e.clientX - position.x, y: e.clientY - position.y }); }, [position]); const handleMouseMove = useCallback((e: MouseEvent) => { if (!isDragging) return; let newX = e.clientX - offset.x; let newY = e.clientY - offset.y; newX = Math.max(0, Math.min(newX, window.innerWidth - (panelRef.current?.offsetWidth || 0))); newY = Math.max(0, Math.min(newY, window.innerHeight - (panelRef.current?.offsetHeight || 0))); setPosition({ x: newX, y: newY }); }, [isDragging, offset]); const handleMouseUp = useCallback(() => { setIsDragging(false); }, []); useEffect(() => { window.addEventListener('mousemove', handleMouseMove); window.addEventListener('mouseup', handleMouseUp); return () => { window.removeEventListener('mousemove', handleMouseMove); window.removeEventListener('mouseup', handleMouseUp); }; }, [handleMouseMove, handleMouseUp]); const rhythmOptions = (Object.keys(PULSE_RHYTHMS) as RhythmKey[]).filter(key => key !== "Ambient (Original)") const rhythmLabels: Record = { "Techno (Frequente)": "R1", "Hip-Hop (Esporádico)": "R2", "Lo-Fi (Suave)": "R3", "Rock (Explosivo)": "R4" } return (

{ e.preventDefault(); handleMouseDown(e); }} /> {!isMinimized && (

Pulse Style

{rhythmOptions.map((style) => { const isActive = currentRhythm === style return ( ) })}

Light Dynamics

updateSetting('pulseAmplitude', v)} /> updateSetting('lightRadiusMultiplier', v)} /> updateSetting('lightConcentration', v)} /> updateSetting('persistenceFactor', v)} /> updateSetting('colorTransitionSpeed', v)} />

Grid & Color

updateSetting('gridScaleFactor', v)} />

updateSetting('useColorCycle', e.target.checked)} className="settings-checkbox" /> Enable Color Cycle

{!settings.useColorCycle && (

Static Color updateSetting('staticColor', e.target.value)} className="settings-color-picker" />

)}

) } // ======================================================= // --- COMPONENTE PRINCIPAL (LÓGICA DO CANVAS) --- // ======================================================= export default function PulsingHexagonBackground() { const [currentRhythm, setCurrentRhythm] = useState("Techno (Frequente)") const [settings, setSettings] = useState(DEFAULT_SETTINGS) const currentPulseIntensity = useRef(0.0); const canvasLightRef = useRef(null) const canvasGridRef = useRef(null) const rhythmRef = useRef(currentRhythm); const settingsRef = useRef(settings); useEffect(() => { rhythmRef.current = currentRhythm }, [currentRhythm]); useEffect(() => { settingsRef.current = settings }, [settings]); useEffect(() => { const canvasLight = canvasLightRef.current const canvasGrid = canvasGridRef.current if (!canvasLight || !canvasGrid) return const c = [canvasLight, canvasGrid] const n = c.length let w: number, h: number, _min: number const ctx: CanvasRenderingContext2D[] = [] let grid: Grid let source: { x: number; y: number } | null = null let t = 0 let request_id: number | null = null const { cos, sin, sqrt, PI, min, random } = Math // --- VARIÁVEIS DE GEOMETRIA (HEXÁGONO ORIGINAL RESTAURADO) --- const SCALE = settings.gridScaleFactor const HEX_CRAD = 32 * SCALE const HEX_BG = DEEP_BLACK const HEX_HL = PANEL_GRAY const HEX_HLW = 2 * SCALE const HEX_GAP = 4 * SCALE const unit_x = 3 * HEX_CRAD + HEX_GAP * sqrt(3) const unit_y = HEX_CRAD * sqrt(3) * 0.5 + 0.5 * HEX_GAP const off_x = 1.5 * HEX_CRAD + HEX_GAP * sqrt(3) * 0.5 const NEON_PALETE = ["#FF006E", "#8338EC", "#3A86FF", "#06FFA5", "#FFBE0B", "#FB5607"] const T_SWITCH = settings.colorTransitionSpeed const wp = NEON_PALETE.map((c) => { const num = Number.parseInt(c.replace("#", ""), 16) return { r: (num >> 16) & 0xff, g: (num >> 8) & 0xff, b: num & 0xff, } }) const nwp = wp.length let csi = 0 const f = 1 / T_SWITCH // --- GRID CLASSES (HEXÁGONO ORIGINAL) --- class GridItem { x: number; y: number; points: { hex: Array<{ x: number; y: number }>; hl: Array<{ x: number; y: number }> } constructor(x?: number, y?: number) { this.x = x || 0; this.y = y || 0; this.points = { hex: [], hl: [] }; this.init() } init() { const ba = PI / 3; const ri = HEX_CRAD - 0.5 * HEX_HLW for (let i = 0; i < 6; i++) { const a = i * ba; const x = this.x + HEX_CRAD * cos(a); const y = this.y + HEX_CRAD * sin(a) this.points.hex.push({ x, y }); if (i > 2) { const hlx = this.x + ri * cos(a); const hly = this.y + ri * sin(a); this.points.hl.push({ x: hlx, y: hly }) } } } draw(ct: CanvasRenderingContext2D) { for (let i = 0; i < 6; i++) { if (i === 0) { ct.moveTo(this.points.hex[i].x, this.points.hex[i].y) } else { ct.lineTo(this.points.hex[i].x, this.points.hex[i].y) } } } highlight(ct: CanvasRenderingContext2D) { for (let i = 0; i < 3; i++) { if (i === 0) { ct.moveTo(this.points.hl[i].x, this.points.hl[i].y) } else { ct.lineTo(this.points.hl[i].x, this.points.hl[i].y) } } } } class Grid { cols: number; rows: number; items: GridItem[]; n: number constructor(rows?: number, cols?: number) { this.cols = cols || 16; this.rows = rows || 16; this.items = []; this.n = 0; this.init() } init() { for (let row = 0; row < this.rows; row++) { const y = row * unit_y for (let col = 0; col < this.cols; col++) { const x = (row % 2 === 0 ? 0 : off_x) + col * unit_x this.items.push(new GridItem(x, y)) } } this.n = this.items.length } draw(ct: CanvasRenderingContext2D) { ct.fillStyle = HEX_BG; ct.beginPath() for (let i = 0; i < this.n; i++) { this.items[i].draw(ct) } ct.closePath(); ct.fill() ct.strokeStyle = HEX_HL; ct.beginPath() for (let i = 0; i < this.n; i++) { this.items[i].highlight(ct) } ct.closePath(); ct.stroke() } } // --- Fim das Classes de Grid (Restauradas) --- const init = () => { const s = getComputedStyle(c[0]) w = ~~s.width.split("px")[0] h = ~~s.height.split("px")[0] _min = 0.75 * min(w, h) const rows = ~~(h / unit_y) + 2 const cols = ~~(w / unit_x) + 2 for (let i = 0; i < n; i++) { c[i].width = w c[i].height = h const context = c[i].getContext("2d") if (context) ctx[i] = context } grid = new Grid(rows, cols) grid.draw(ctx[1]) if (!source) { source = { x: ~~(w / 2), y: ~~(h / 2) } } neon() } const neon = () => { if (!source) return const currentSettings = settingsRef.current const rhythmConfig = PULSE_RHYTHMS[rhythmRef.current]; // 1. LÓGICA DE PULSO ALEATÓRIO E DECAIMENTO let pulseValue; if (rhythmConfig.chaos) { // Pulso Caótico Original (Ambient) pulseValue = sin(7 * t * f) * cos(5 * t * f) * sin(3 * t * f); } else { // Pulso de Decaimento Aleatório (Sua Ideia dos Olhos) currentPulseIntensity.current *= rhythmConfig.decay; if (random() < rhythmConfig.frequency && currentPulseIntensity.current < 0.2) { // Dispara um novo pulso forte (simulando uma batida) currentPulseIntensity.current = random() * rhythmConfig.amplitude; } pulseValue = Math.min(1.0, currentPulseIntensity.current + rhythmConfig.base); } // 2. Lógica de Cor (Mantida) let rgb_str: string; if (!currentSettings.useColorCycle) { const k = (t % T_SWITCH) * f const rgb = { r: ~~(wp[csi].r * (1 - k) + wp[(csi + 1) % nwp].r * k), g: ~~(wp[csi].g * (1 - k) + wp[(csi + 1) % nwp].g * k), b: ~~(wp[csi].b * (1 - k) + wp[(csi + 1) % nwp].b * k), } rgb_str = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")" } else { rgb_str = currentSettings.staticColor } // 3. Aplica o pulso dinâmico (stp) const finalPulseAmplitude = pulseValue * currentSettings.pulseAmplitude; const stp = 0.5 - 0.5 * finalPulseAmplitude; const customRadius = currentSettings.lightRadiusMultiplier * _min const light = ctx[0].createRadialGradient( source.x, source.y, 0, source.x, source.y, customRadius ) const concentrationString = `rgba(0,0,0,${currentSettings.lightConcentration.toFixed(2)})` light.addColorStop(0, rgb_str) light.addColorStop(stp, concentrationString) const fadeOutString = `rgba(0,0,0,${currentSettings.persistenceFactor.toFixed(3)})` fillBackground(fadeOutString) fillBackground(light) t++ if (!currentSettings.useColorCycle && t % T_SWITCH === 0) { csi++ if (csi === nwp) { csi = 0 t = 0 } } request_id = requestAnimationFrame(neon) } const fillBackground = (bg_fill: string | CanvasGradient) => { ctx[0].fillStyle = bg_fill ctx[0].beginPath() ctx[0].rect(0, 0, w, h) ctx[0].closePath() ctx[0].fill() } const handleResize = () => { if (request_id) { cancelAnimationFrame(request_id) } init() } const handleMouseMove = (e: MouseEvent) => { source = { x: e.clientX, y: e.clientY } } init() window.addEventListener("resize", handleResize, false) window.addEventListener("mousemove", handleMouseMove, false) // Cleanup return () => { if (request_id) { cancelAnimationFrame(request_id) } window.removeEventListener("resize", handleResize) window.removeEventListener("mousemove", handleMouseMove) } }, [settings.gridScaleFactor]) return (

{/* Canvas Elements */}

) } [V0_FILE]markdown:file="README.md" isDeleted="true" isUserEdit="true" # Neon Pulse Canvas ## Description Neon Pulse Canvas is a highly customizable React component that renders a mesmerizing full-screen animated background featuring a honeycomb hexagon grid with dynamic pulsing light effects. The component uses HTML5 Canvas to create two layered visual effects: a radial gradient light source that follows the mouse cursor, and a geometric hexagon grid overlay. The light pulses rhythmically with configurable intensity patterns, simulating music visualization effects similar to DJ equipment VU meters. The component was developed using React functional components with hooks (useState, useRef, useEffect) for state management and Canvas API lifecycle control. It features a draggable settings panel styled as a vintage VST plugin interface, allowing real-time adjustment of pulse rhythms (Techno, Hip-Hop, Lo-Fi, Rock), light dynamics (amplitude, radius, concentration), color cycling modes, and grid density. The architecture separates concerns with pure Canvas rendering logic, CSS modules for UI styling, and React state management for interactive controls. ## Tags animation, canvas, react, hexagon, neon, pulsing-light, interactive-background, music-visualization, gradient, geometric-pattern84:["$","$L8e",null,{"chatId":"difkPIDMiCw","children":["$","$L8f",null,{"data":{"@\"active-block\",\"difkPIDMiCw\",":{"id":"b_WnKZTJuYkvr","messageId":"RG1TLIZ1YFu0Y7NBZo3cQMmB08773p7r","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Finalizing project","taskNameComplete":"Finalized project"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"difkPIDMiCw\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from tulioportela

More Templates Like This